Ext.QuickTips.init();
//Ext.form.Field.prototype.msgTarget = "side";

//////////////////////////////////////////////////
Ext.ns("Ext.framework");
Ext.framework.required = "<span style='color:red'>*</span>";
Ext.framework.title = {
	alert: "Alert",
	confirm: "Confirm",
	error: "Error",
	message: "Message"
};

Ext.framework.config = {
	header_size: 35,
	menu_size: 250,
	menu_min_size: 50,
	menu_max_size: 500,
	container_page_size: 5,
	size: {width: 0, height: 0}
};
Ext.framework.listener = {
	tab: "home",
	fun: {},
	callback: function(func) {
		if (typeof(func) == "function") {
			func(Ext.framework.config.size.width, Ext.framework.config.size.height);
		}
	}
};
Ext.framework.header = new Ext.Panel({
	region: "north",
	width: "auto",
	height: Ext.framework.config.header_size,
	baseCls: "x-plain",
	border: false,
	tbar: new Ext.Toolbar({
		height: Ext.framework.config.header_size,
		style: "border-style:hidden",
		items: [{
			xtype: "panel",
			baseCls: "x-plain",
			html: "<h1 style='font-size:15px;margin:5px 0'>ExtJS 3.4 Framework Viewport</h1>"
		}, "->", {
			xtype: "button",
			iconCls: "Config",
			text: "Setting",
			handler: function() {
				Ext.framework.plugin.PersonalCenter.show();
			}
		}, {
			xtype: "button",
			iconCls: "Help",
			text: "Help"
		}, {
			xtype: "button",
			iconCls: "Information",
			text: "About"
		}, {
			xtype: "button",
			iconCls: "Exclamation",
			text: "Exit",
			handler: function() {
				Ext.Msg.confirm(Ext.framework.title.confirm, "Are you sure you want to exit the system?", function(btn) {
					if (btn == "yes") {
						self.opener = null;
						self.open('','_self');
						self.close();
					}
				});
			}
		}]
	})
});
Ext.framework.menu = new Ext.tree.TreePanel({
	region: "west",
	title: "Navigation",
	width: Ext.framework.config.menu_size,
	height: "auto",
	split: true,
	minSize: Ext.framework.config.menu_min_size,
	maxSize: Ext.framework.config.menu_max_size,
	autoScroll: true,
	tools: [{
		id: "plus",
		qtip: "Open All",
		handler: function() {
			Ext.framework.menu.expandAll();
		}
	}, {
		id: "minus",
		qtip: "Close All",
		handler: function() {
			Ext.framework.menu.collapseAll();
		}
	}],
	//collapsible: true,
	collapseMode: "mini",
	loader: new Ext.tree.TreeLoader(),
	root: new Ext.tree.AsyncTreeNode({
		expanded: true,
		children: [{
			text: "我的网页",
			leaf: false,
			children: [{
				text: "百度一下",
				leaf: true,
				iconCls: "Details",
				href: "http://www.baidu.com/?tn=news"
			}, {
				text: "腾讯中心",
				leaf: true,
				iconCls: "Details",
				href: "http://www.qq.com"
			}, {
				text: "网易中心",
				leaf: true,
				iconCls: "Details",
				href: "http://www.163.com"
			}]
		}, {
			text: "我的音乐",
			leaf: false,
			children: [{
				text: "百度音乐",
				leaf: true,
				iconCls: "Details",
				href: "http://music.baidu.com"
			}, {
				text: "酷狗音乐",
				leaf: true,
				iconCls: "Details",
				href: "http://www.kugou.com"
			}]
		}]
	}),
	rootVisible: false,
	listeners: {
		click: function(node, evt) {
			if (node.isLeaf()) {
				evt.stopEvent();
				
				var tab = Ext.framework.container.getComponent(node.id);
				if (!tab && Ext.framework.container.items.length >= Ext.framework.config.container_page_size) {
					var message = "The number of pages you open more then " + Ext.framework.config.container_page_size
					            + ", please close other pages.";
					Ext.Msg.alert(Ext.framework.title.alert, message);
				} else {
					Ext.framework.listener.tab = "" + node.id;
					tab = Ext.framework.container.add({
						id: node.id,
						title: node.text,
						iconCls: node.attributes.iconCls,
						width: "100%",
						height: "100%",
						closable: true,
						closeAction: "destory",
						/*autoLoad: {
							text: "<h3>Loading...</h3>",
							url: node.attributes.href,
							nocache: true,
							scripts: true
						}*/
						html: "<iframe style='width:100%;height:100%' frameborder='0' src='" + node.attributes.href + "'/>",
				        listeners: {
				            close: function() {
				                delete Ext.framework.listener.fun["" + node.id];
				            }
				        }
					});
				}
				if (tab) {
					Ext.framework.container.setActiveTab(tab);
				}
			}
			return false;
		}
	}
});
Ext.framework.container = new Ext.TabPanel({
	region: "center",
	activeTab: 0,
	items: [{
		title: "Home",
		iconCls: "House",
		width: "100%",
		height: "100%",
        //closable: true,
        //closeAction: "destory",
		autoLoad: {
			text: "<h3>Loading...</h3>",
			url: "framework.home.html",
			nocache: true,
			scripts: true
		},
		listeners: {
			close: function() {
				delete Ext.framework.listener.fun["home"];
			}
		}
	}],
	listeners: {
		contextmenu: function(panel, tab, evt) {
			var menu = new Ext.menu.Menu({
				shadow: "drop",
				items: [{
					text: "Close",
					handler: function() {
						if (tab.closable) {
							tab.fireEvent("close", tab);
							panel.remove(tab);
						}
					}
				}, {
					text: "Close Others",
					handler: function() {
						panel.items.each(function(item) {
							if (item.closable && item != tab) {
								item.fireEvent("close", item);
								panel.remove(item);
							}
						});
					}
				}, {
					text: "Close All",
					handler: function() {
						panel.items.each(function(item) {
							if (item.closable) {
								item.fireEvent("close", item);
								panel.remove(item);
							}
						});
					}
				}]
			});
			
			menu.showAt(evt.getPoint());
		},
		tabchange: function(panel, tab) {
			Ext.framework.listener.callback(Ext.framework.listener.fun["" + tab.getId()]);
		},
		resize: function(panel, width, height) {
			Ext.framework.config.size.width = width - 2;
			Ext.framework.config.size.height = height - 29;
			var funkey = panel.getActiveTab().getId();
			Ext.framework.listener.callback(Ext.framework.listener.fun[funkey]);
			//for (var funkey in Ext.framework.listener.fun) {
			//	if (typeof(Ext.framework.listener.fun[funkey]) == "function") {
			//		Ext.framework.listener.fun[funkey](Ext.framework.config.size.width, Ext.framework.config.size.height);
			//	}
			//}
		}
	}
});

//////////////////////////////////////////////////
Ext.ns("Ext.framework.plugin");
// Personal center
Ext.framework.plugin.PersonalCenter = (function(fn, scope) {
	// password form panel
	var passwordPanel = new Ext.form.FormPanel({
		title: "Password",
		baseCls: "x-plain",
		iconCls: "Lock",
		labelWidth: 120,
		defaults: {
			width: 250
		},
		items: [{
			xtype: "textfield",
			fieldLabel: "Old Password",
			inputType: "password",
			allowBlank: false,
			msgTarget: "side"
		}, {
			xtype: "textfield",
			fieldLabel: "New Password",
			inputType: "password",
			allowBlank: false,
			msgTarget: "side"
		}, {
			xtype: "textfield",
			fieldLabel: "Confirm Password",
			inputType: "password",
			allowBlank: false,
			msgTarget: "side"
		}]
	});
	// others panel
	var othersPanel = new Ext.Panel({
		title: "Others",
		baseCls: "x-plain",
		iconCls: "Wand"
	});
	// tab panel
	var tabPanel = new Ext.TabPanel({
		bodyStyle: "padding:10px",
		activeTab: 0,
		items: [passwordPanel, othersPanel]
	});
	// personal center window
	var personalCenterWindow = new Ext.Window({
		title: "Personal Center",
		iconCls: "UserHome",
		width: 450,
		//autoHeight: true,
		height: 185,
		modal: true,
		resizable: false,
		closeAction: "hide",
		defaults: {
			baseCls: "x-plain"
		},
		items: [tabPanel],
		buttons: [{
			text: "Save",
			iconCls: "Disk",
			handler: function() {
				var activeTab = tabPanel.getActiveTab();
				if (activeTab.id == passwordPanel.id) {
					if (!passwordPanel.getForm().isValid()) {
						return;
					}
				}
			}
		}, {
			text: "Cancel",
			iconCls: "Decline",
			handler: function() {
				personalCenterWindow.hide();
			}
		}]
	});

	return personalCenterWindow;
})();

//////////////////////////////////////////////////
Ext.ns("Ext.ux");
Ext.ux.ListenerPanel = Ext.extend(Ext.Panel, {
	border: false,
	resizeListener: null,
	initComponent: function() {
		var me = this;
		Ext.ux.ListenerPanel.superclass.initComponent.call(this);
		if (typeof(me.resizeListener) == "function") {
			Ext.framework.listener.fun[Ext.framework.listener.tab] = me.resizeListener;
			//me.resizeListener(Ext.framework.config.size.width, Ext.framework.config.size.height);
			me.on("afterrender", this.initResizeListener, this);
		}
	},
	initResizeListener: function() {
		this.resizeListener(Ext.framework.config.size.width, Ext.framework.config.size.height);
	}
});

//////////////////////////////////////////////////
Ext.onReady(function() {
	new Ext.Viewport({
		layout: "border",
		items: [
			Ext.framework.header,
			Ext.framework.menu,
			Ext.framework.container
		]
	});
});
